<template>
	<view class="coupons">
		<u-sticky>
			<u-tabs
				:list="tabsList"
				lineColor="#2f75fa"
				:activeStyle="{
					color: '#2f75fa'
				}"
				:inactiveStyle="{
					color: '#353535'
				}"
				:lineWidth="30"
				:current="currentTab"
				@click="onClickTab"
			/>
		</u-sticky>
		
		<view class="coupons-list" v-if="couponsList.length" :class="[{ lapse: currentTab === 2 }]">
			<view
				v-for="item in couponsList"
				:key="item.id"
				class="coupons-item flex-between"
			>
				<view class="status pa" :style="{ backgroundImage: tabsList[currentTab].icon ? `url(${tabsList[currentTab].icon})` : '' }"></view>
			
				<view class="left flex-center">
					<view class="free" v-if="item.free">免费</view>
					<view class="text-center" v-else>
						<view>
							¥ <text class="price">{{ item.price }}</text>
						</view>
						<text class="full">满{{ item.full }}元可用</text>
					</view>
				</view>
				<view class="right">
					<view class="name">
						{{ item.name }}
					</view>
					<view class="desc">
						有效期至：{{ item.expiration }}
					</view>
					<view class="desc">
						使用商家：{{ item.business }}
					</view>
				</view>
			</view>
		</view>
		
		<u-empty v-else mode="coupon" icon="https://sass-test.doit10019.com/upload/202501/08114139-33838600519097990.jpg?attname=coupon.jpg" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentTab: 0,
			tabsList: [
				{ name: '未使用(5)' },
				{ name: '已使用(5)', icon: this.$https.assetsPath + 'dcf0218fded9036bea5025856404f6c159351f45.png' },
				{ name: '已过期(3)', icon: this.$https.assetsPath + '2e8eb51996967ced9c8480a2a2054f07ea437a0d.png' },
			],
			couponsList: [
				{
					id: 1,
					name: '商品优惠券',
					expiration: '2020-10-20',
					business: '点托体育馆',
					price: 5,
					full: 40
				},
				{
					id: 2,
					name: '商品优惠券',
					expiration: '2020-10-20',
					business: '点托体育馆',
					free: true
				}
			]
		}
	},
	methods: {
		onClickTab({ index }) {
			this.currentTab = index;
		}
	}
}
</script>

<style lang="scss" scoped>
.coupons {
	min-height: 100vh;
	background-color: #f7f7f7;
	padding-bottom: env(safe-area-inset-bottom);
		
	/deep/.u-tabs {
		background-color: #fff;
		.u-tabs__wrapper__nav__item {
			flex: 1;
		}
	}
	
	.coupons-list {
		padding: 20rpx 40rpx;
		
		&.lapse {
			.left {
				color: #bebebe;
			}
		}
	}
	
	.coupons-item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 40rpx 0;
		position: relative;
		overflow: hidden;
		
		&::before,
		&::after {
			content: '';
			position: absolute;
			top: 50%;
			background-color: #f7f7f7;
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			transform: translateY(-50%);
		}
		
		&::before {
			left: 0;
			transform: translate(-50%, -50%);
		}
		
		&::after {
			right: 0;
			transform: translate(50%, -50%);
		}
		
		& + .coupons-item {
			margin-top: 20rpx;
		}
		
		.status {
			top: -30rpx;
			right: 30rpx;
			width: 116rpx;
			height: 116rpx;
			background-position: left top;
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
		
		.left {
			width: 240rpx;
			color: #f63043;
			font-size: 28rpx;
			
			.free {
				font-size: 42rpx;
			}
			
			.price {
				font-size: 60rpx;
				font-weight: bold;
			}
		}
		
		.right {
			flex: 1;
			
			.name {
				color: #000;
				font-size: 32rpx;
				font-weight: bold;
			}
			
			.desc {
				font-size: 28rpx;
				color: #d1d1d1;
				margin-top: 10rpx;
			}
		}
	}
}
</style>
